<!-- Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<!-- default.min.js and highlight.pack.js in this directory
are highlightjs, v8.4 -->

<script src="highlight.pack.js"></script>

<polymer-element name="code-block" attributes="language">
  <template>
    <style>
      pre {
        display: block;
        padding: 9.5px;
        margin: 0 5 10px;
        font-size: 13px;
        line-height: 1.42857143;
        color: #333;
        word-break: break-all;
        word-wrap: break-word;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
    </style>
    <link rel="stylesheet" href="default.min.css">
    <pre id="pre"></pre>
  </template>

  <script>
    Polymer({
      language: "python",

      languageChanged: function () {
        this.updateCode();
      },

      updateCode: function () {
        highlighted = hljs.highlight(this.language, this.textContent);
        this.$.pre.innerHTML = highlighted.value;
      },

      ready: function() {
        this.updateCode();

        var that = this;
        var observer = new MutationObserver(function (mutations) {
          that.updateCode();
        });

        observer.observe(this, {
          subtree: true,
          characterData: true,
        });
      }
    });
  </script>

</polymer-element>